<template>
  <view class="publish-page">
    <!-- 发布表单 -->
    <view class="publish-form">
      <view class="form-section">
        <view class="section-title">
          <u-icon name="edit" size="16" color="#52c41a"></u-icon>
          <text class="title-text">基本信息</text>
        </view>
        
        <view class="form-content">
          <view class="form-item">
            <text class="form-label">类型 <text class="required">*</text></text>
            <view class="type-selector">
              <view 
                v-for="(type, index) in itemTypes" 
                :key="index"
                class="type-option"
                :class="{ active: formData.type === type.value }"
                @click="handleTypeChange(type.value)"
              >
                <view class="type-icon">
                  <u-icon :name="type.icon" size="20" :color="formData.type === type.value ? '#52c41a' : '#999'"></u-icon>
                </view>
                <text class="type-text">{{ type.label }}</text>
              </view>
            </view>
          </view>
          
          <view class="form-item">
            <text class="form-label">标题 <text class="required">*</text></text>
            <u-input 
              v-model="formData.title"
              placeholder="请输入失物标题"
              :border="false"
              bg-color="#f8f9fa"
            ></u-input>
          </view>
          
          <view class="form-item">
            <text class="form-label">详细描述 <text class="required">*</text></text>
            <u-textarea 
              v-model="formData.description"
              placeholder="请详细描述失物特征、丢失/发现时间、地点等信息"
              :maxlength="500"
              :count="true"
              :border="false"
              bg-color="#f8f9fa"
            ></u-textarea>
          </view>
        </view>
      </view>

      <view class="form-section">
        <view class="section-title">
          <u-icon name="image" size="16" color="#52c41a"></u-icon>
          <text class="title-text">物品图片</text>
        </view>
        
        <view class="form-content">
          <view class="image-upload">
            <view class="upload-tips">
              <text class="tips-text">请上传物品照片，最多9张</text>
            </view>
            
            <view class="image-list">
              <view 
                v-for="(image, index) in formData.images" 
                :key="index"
                class="image-item"
              >
                <image :src="image.url" mode="aspectFill" class="image"></image>
                <view class="image-delete" @click="handleDeleteImage(index)">
                  <u-icon name="close" size="12" color="#fff"></u-icon>
                </view>
              </view>
              
              <view 
                v-if="formData.images.length < 9" 
                class="upload-btn"
                @click="handleUploadImage"
              >
                <u-icon name="plus" size="24" color="#999"></u-icon>
                <text class="upload-text">添加图片</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="form-section">
        <view class="section-title">
          <u-icon name="map-pin" size="16" color="#52c41a"></u-icon>
          <text class="title-text">位置信息</text>
        </view>
        
        <view class="form-content">
          <view class="form-item">
            <text class="form-label">发现/丢失地点 <text class="required">*</text></text>
            <u-input 
              v-model="formData.location"
              placeholder="请输入发现或丢失的具体地点"
              :border="false"
              bg-color="#f8f9fa"
            ></u-input>
          </view>
          
          <view class="form-item">
            <text class="form-label">详细地址</text>
            <u-textarea 
              v-model="formData.detailAddress"
              placeholder="请输入详细地址（选填）"
              :maxlength="200"
              :count="true"
              :border="false"
              bg-color="#f8f9fa"
            ></u-textarea>
          </view>
        </view>
      </view>

      <view class="form-section">
        <view class="section-title">
          <u-icon name="wallet" size="16" color="#52c41a"></u-icon>
          <text class="title-text">酬金设置</text>
        </view>
        
        <view class="form-content">
          <view class="form-item">
            <text class="form-label">酬金类型</text>
            <view class="reward-type">
              <view 
                v-for="(reward, index) in rewardTypes" 
                :key="index"
                class="reward-option"
                :class="{ active: formData.rewardType === reward.value }"
                @click="handleRewardTypeChange(reward.value)"
              >
                <text class="reward-text">{{ reward.label }}</text>
              </view>
            </view>
          </view>
          
          <view v-if="formData.rewardType === 'paid'" class="form-item">
            <text class="form-label">酬金金额</text>
            <u-input 
              v-model="formData.rewardAmount"
              placeholder="请输入酬金金额"
              type="number"
              :border="false"
              bg-color="#f8f9fa"
            >
              <template #suffix>
                <text class="suffix-text">元</text>
              </template>
            </u-input>
          </view>
        </view>
      </view>

      <view class="form-section">
        <view class="section-title">
          <u-icon name="phone" size="16" color="#52c41a"></u-icon>
          <text class="title-text">联系方式</text>
        </view>
        
        <view class="form-content">
          <view class="form-item">
            <text class="form-label">联系电话 <text class="required">*</text></text>
            <u-input 
              v-model="formData.contactPhone"
              placeholder="请输入联系电话"
              type="number"
              :border="false"
              bg-color="#f8f9fa"
            ></u-input>
          </view>
          
          <view class="form-item">
            <text class="form-label">微信</text>
            <u-input 
              v-model="formData.wechat"
              placeholder="请输入微信号（选填）"
              :border="false"
              bg-color="#f8f9fa"
            ></u-input>
          </view>
        </view>
      </view>

      <view class="form-section">
        <view class="section-title">
          <u-icon name="clock" size="16" color="#52c41a"></u-icon>
          <text class="title-text">时间信息</text>
        </view>
        
        <view class="form-content">
          <view class="form-item">
            <text class="form-label">发现/丢失时间</text>
            <u-datetime-picker 
              v-model="formData.itemTime"
              mode="datetime"
              :max-date="maxDate"
              placeholder="请选择发现或丢失时间"
            ></u-datetime-picker>
          </view>
        </view>
      </view>

      <view class="form-section">
        <view class="section-title">
          <u-icon name="info-circle" size="16" color="#52c41a"></u-icon>
          <text class="title-text">其他信息</text>
        </view>
        
        <view class="form-content">
          <view class="form-item">
            <text class="form-label">备注信息</text>
            <u-textarea 
              v-model="formData.remark"
              placeholder="请输入备注信息（选填）"
              :maxlength="200"
              :count="true"
              :border="false"
              bg-color="#f8f9fa"
            ></u-textarea>
          </view>
        </view>
      </view>

      <view class="form-section">
        <view class="section-title">
          <u-icon name="check-circle" size="16" color="#52c41a"></u-icon>
          <text class="title-text">确认信息</text>
        </view>
        
        <view class="confirm-content">
          <view class="confirm-item">
            <u-checkbox 
              v-model="formData.agreeTerms"
              active-color="#52c41a"
            ></u-checkbox>
            <text class="confirm-text">我已阅读并同意<text class="link-text" @click="handleViewTerms">《失物招领协议》</text></text>
          </view>
          
          <view class="confirm-item">
            <u-checkbox 
              v-model="formData.agreePrivacy"
              active-color="#52c41a"
            ></u-checkbox>
            <text class="confirm-text">我已阅读并同意<text class="link-text" @click="handleViewPrivacy">《隐私政策》</text></text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="preview-btn" @click="handlePreview">
        <text class="btn-text">预览</text>
      </view>
      
      <view class="submit-btn" @click="handleSubmit">
        <text class="btn-text">发布</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'

// 表单数据
const formData = reactive({
  type: 'lost',
  title: '',
  description: '',
  images: [],
  location: '',
  detailAddress: '',
  rewardType: 'free',
  rewardAmount: '',
  contactPhone: '',
  wechat: '',
  itemTime: '',
  remark: '',
  agreeTerms: false,
  agreePrivacy: false
})

// 物品类型
const itemTypes = reactive([
  { label: '丢失物品', value: 'lost', icon: 'help-circle' },
  { label: '拾到物品', value: 'found', icon: 'gift' }
])

// 报酬类型
const rewardTypes = reactive([
  { label: '免费', value: 'free' },
  { label: '有偿', value: 'paid' }
])

// 日期范围
const maxDate = ref(Date.now())

// 类型选择
const handleTypeChange = (value: string) => {
  formData.type = value
}

// 报酬类型选择
const handleRewardTypeChange = (value: string) => {
  formData.rewardType = value
  if (value === 'free') {
    formData.rewardAmount = ''
  }
}

// 上传图片
const handleUploadImage = () => {
  uni.chooseImage({
    count: 9 - formData.images.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      res.tempFilePaths.forEach((path, index) => {
        formData.images.push({
          url: path,
          name: `image_${Date.now()}_${index}`
        })
      })
    },
    fail: () => {
      uni.showToast({
        title: '选择图片失败',
        icon: 'error'
      })
    }
  })
}

// 删除图片
const handleDeleteImage = (index: number) => {
  formData.images.splice(index, 1)
}

// 返回上一页
const handleBack = () => {
  uni.navigateBack()
}

// 查看协议
const handleViewTerms = () => {
  uni.navigateTo({
    url: '/pages/common/terms'
  })
}

// 查看隐私政策
const handleViewPrivacy = () => {
  uni.navigateTo({
    url: '/pages/common/privacy'
  })
}

// 表单验证
const validateForm = () => {
  if (!formData.title.trim()) {
    uni.showToast({
      title: '请输入标题',
      icon: 'none'
    })
    return false
  }
  
  if (!formData.description.trim()) {
    uni.showToast({
      title: '请输入详细描述',
      icon: 'none'
    })
    return false
  }
  
  if (!formData.location.trim()) {
    uni.showToast({
      title: '请输入发现/丢失地点',
      icon: 'none'
    })
    return false
  }
  
  if (!formData.contactPhone.trim()) {
    uni.showToast({
      title: '请输入联系电话',
      icon: 'none'
    })
    return false
  }
  
  if (!/^1[3-9]\d{9}$/.test(formData.contactPhone)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
    return false
  }
  
  if (formData.rewardType === 'paid' && !formData.rewardAmount) {
    uni.showToast({
      title: '请输入酬金金额',
      icon: 'none'
    })
    return false
  }
  
  if (!formData.agreeTerms) {
    uni.showToast({
      title: '请同意失物招领协议',
      icon: 'none'
    })
    return false
  }
  
  if (!formData.agreePrivacy) {
    uni.showToast({
      title: '请同意隐私政策',
      icon: 'none'
    })
    return false
  }
  
  return true
}

// 预览
const handlePreview = () => {
  if (!validateForm()) {
    return
  }
  
  uni.navigateTo({
    url: '/pages/lost-and-found/preview'
  })
}

// 提交发布
const handleSubmit = () => {
  if (!validateForm()) {
    return
  }
  
  uni.showLoading({
    title: '发布中...'
  })
  
  // 模拟提交
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({
      title: '发布成功',
      icon: 'success'
    })
    
    // 跳转到失物招领列表
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  }, 2000)
}

// 页面加载
onMounted(() => {
  console.log('发布失物招领页面加载完成')
})
</script>

<style lang="scss" scoped>
.publish-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}


.publish-form {
  .form-section {
    background-color: #fff;
    margin-bottom: 20rpx;
    
    .section-title {
      display: flex;
      align-items: center;
      gap: 12rpx;
      padding: 30rpx 30rpx 20rpx;
      border-bottom: 1rpx solid #f0f0f0;
      
      .title-text {
        font-size: 30rpx;
        font-weight: 600;
        color: #333;
      }
    }
    
    .form-content {
      padding: 30rpx;
      
      .form-item {
        margin-bottom: 30rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .form-label {
          display: block;
          font-size: 28rpx;
          color: #333;
          margin-bottom: 16rpx;
          
          .required {
            color: #ff4d4f;
          }
        }
        
        .type-selector {
          display: flex;
          gap: 20rpx;
          
          .type-option {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12rpx;
            padding: 30rpx 20rpx;
            border: 2rpx solid #f0f0f0;
            border-radius: 12rpx;
            transition: all 0.3s ease;
            
            &.active {
              border-color: #52c41a;
              background-color: #f6ffed;
            }
            
            .type-icon {
              width: 40rpx;
              height: 40rpx;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            
            .type-text {
              font-size: 26rpx;
              color: #666;
            }
          }
        }
        
        .reward-type {
          display: flex;
          gap: 20rpx;
          
          .reward-option {
            flex: 1;
            padding: 20rpx;
            border: 2rpx solid #f0f0f0;
            border-radius: 8rpx;
            text-align: center;
            transition: all 0.3s ease;
            
            &.active {
              border-color: #52c41a;
              background-color: #f6ffed;
              
              .reward-text {
                color: #52c41a;
              }
            }
            
            .reward-text {
              font-size: 28rpx;
              color: #666;
            }
          }
        }
        
        .suffix-text {
          font-size: 28rpx;
          color: #999;
        }
      }
      
      .image-upload {
        .upload-tips {
          margin-bottom: 20rpx;
          
          .tips-text {
            font-size: 24rpx;
            color: #999;
          }
        }
        
        .image-list {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16rpx;
          
          .image-item {
            position: relative;
            aspect-ratio: 1;
            border-radius: 8rpx;
            overflow: hidden;
            
            .image {
              width: 100%;
              height: 100%;
            }
            
            .image-delete {
              position: absolute;
              top: 8rpx;
              right: 8rpx;
              width: 32rpx;
              height: 32rpx;
              background-color: rgba(0, 0, 0, 0.6);
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
          
          .upload-btn {
            aspect-ratio: 1;
            border: 2rpx dashed #d9d9d9;
            border-radius: 8rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8rpx;
            transition: all 0.3s ease;
            
            &:active {
              border-color: #52c41a;
              background-color: #f6ffed;
            }
            
            .upload-text {
              font-size: 24rpx;
              color: #999;
            }
          }
        }
      }
    }
    
    .confirm-content {
      padding: 30rpx;
      
      .confirm-item {
        display: flex;
        align-items: flex-start;
        gap: 16rpx;
        margin-bottom: 20rpx;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .confirm-text {
          flex: 1;
          font-size: 26rpx;
          color: #666;
          line-height: 1.5;
          
          .link-text {
            color: #52c41a;
            text-decoration: underline;
          }
        }
      }
    }
  }
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-top: 1rpx solid #f0f0f0;
  display: flex;
  gap: 20rpx;
  
  .preview-btn {
    flex: 1;
    padding: 24rpx;
    background-color: #f5f5f5;
    border-radius: 12rpx;
    text-align: center;
    transition: all 0.3s ease;
    
    &:active {
      background-color: #e6e6e6;
    }
    
    .btn-text {
      font-size: 28rpx;
      font-weight: 500;
      color: #666;
    }
  }
  
  .submit-btn {
    flex: 2;
    padding: 24rpx;
    background-color: #52c41a;
    border-radius: 12rpx;
    text-align: center;
    transition: all 0.3s ease;
    
    &:active {
      background-color: #389e0d;
    }
    
    .btn-text {
      font-size: 28rpx;
      font-weight: 500;
      color: #fff;
    }
  }
}
</style>
